<script setup lang="ts">
/*
计算属性：
   使用场景：依赖一个或者多个值生成一个新的值
   特点：具有缓存，依赖的值变化 了它会实时改变
   用法
     a:导入
     b:
       const 属性名=computed(()=>{
        return 新的值
       })

     c:
       html  属性名
       js    属性名.value

     ts
      const 属性名=computed<新的值的ts类型>(()=>{
        return 新的值
       }) 
*/

import { computed, ref } from 'vue'

// 计算属性：[1,2,3,4,5,6,7,8,9,10]  通过计算属性算出总和
const arr = ref<number[]>([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
const total = computed<number>(() => {
  return arr.value.reduce((prev, item) => {
    return prev + item
  }, 0)
})
</script>

<template>
  <div>
    <h1>{{ arr }}</h1>
    <h2>总和:{{ total }}</h2>
  </div>
</template>

<style scoped></style>
